@charset "utf8";
/*页头*/
header{
	/*页面宽度固定*/
	width:100%;
	height:43px;
	/*切片：大范围*/
	background: #333;
}
/*切片：小范围*/
/*中控区：决定内容显示*/
header div#wrapper{
	width:1104px;
	height:43px;
	/*外边距居中*/
	margin:0 auto;
}
/*页头左侧*/ 
header div#wrapper div.head_left{
	width:650px;
	height:43px;
	float:left;
}
		/*找最后一个导航选项，去掉竖线*/
		header div#wrapper div.head_left ul li a.c{
			border:0;
		}
		header div#wrapper div.head_left ul  li a:hover{
			color:#fff;
		}
		
		 
		/*页头右侧*/
		header div#wrapper div.head_right{
			width:300px;
			height:43px;
			background: #333333;
			float:right;
			}
			/*右侧位：内容右浮动*/
			header div#wrapper div.head_right ul li{
				float:right
			}
			/*右侧位：竖线*/
			header div#wrapper div.head_right ul li a{
				border-right: 1px solid #424242;
			}
			/*去掉竖线：购物车、注册旁边*/
			header div#wrapper div.head_right ul li a.fix{
				border:0;
			}
			header div#wrapper div.head_right ul li a.c{
				border:0;
			}
			/*找右侧，购物车，加宽，背景色*/
			header div#wrapper div.head_right ul li.li_right{
				width:120px;
				background: #424242;
			}
			/*加精灵图*/
			header div#wrapper div.head_right ul li.li_right i.shop{
				bor der:1px solid red;
				/*撕开口：行内元素，左右口--*/
				padding:0 10px;
				/*图片没有导入：路径 相对定位 
				相对于header.css找img图片
				路径：返回上一级，在MI路径下找img--图片
				
				*/
				background: url(../img/buy.png) no-repeat;
				position: relative;
				top: 3px;
				right:-3px;
				}
			
			/*
			难题：文本+精灵图+背景色（全部改变）
			光标移动上去右侧购物车区域
			【背景色，先变色，然后在文本变色，同时给精灵图改变】
			*/
		   header div#wrapper div.head_right ul li.li_right:hover{
			   background: #eee;
		   }
		   header div#wrapper div.head_right ul li.li_right:hover a{
			   color:#ff6700;
		   }
		   
           header div#wrapper div.head_right ul li.li_right:hover i.shop{
	       background: url(../img/buy01.png) no-repeat;
 }
 header div#wrapper div.head_right  div.out{
       width: 280px;
       height: 74px;
       border: 1px solid white;
      line-height: 74px;
      text-align: center;
       /* 挂靠位：绝对定位：按照相对定位基点开始定位 */
       position: absolute;
      top: 44px;
       right:144px;
       /* 显示与隐藏 JavaScript【JQuery框架】 */
       display:  none;
       z-index: 2;
      background: #ffffff;
      font-size: 14px;
	  color: black;
	  filter: drop-shadow(0 0 1px #d0d0d0);
   }
    